<!DOCTYPE html>
<!-- saved from url=(0058)http://layout.jquery-dev.com/demos/iframe_local_child.html -->
<html style="overflow: hidden; height: 100%; border: none; padding: 0px; margin: 0px;"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	

	<title>Simple Layout</title>

	<link rel="stylesheet" type="text/css" href="static/jquery.layout/layout-default-latest.css">

	<style type="text/css">
	/**
	 *	This CSS below is only for cosmetic and demo purposes
	 *	Nothing here affects the appearance of the layout
	 */

	body {
		background:		#FFC;
		font-family:	Arial, sans-serif;
		*font-size:		0.85em;
		padding:		10px;
	}
	p {
		margin:			1em 0;
	}

	</style>

<script type="text/javascript" src="static/jquery.min.js"></script>
<script type="text/javascript" src="static/jquery-ui/jquery-ui.js"></script>
<script type="text/javascript" src="static/jquery.layout/jquery.layout-latest.js"></script>

	<script type="text/javascript">

	var iframeLayout;

	$(document).ready(function () {

		iframeLayout = $('body').layout();

 	});

	</script>

</head>
<body style="zoom: 1; overflow: hidden; width: auto; height: auto; margin: 0px; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px;" class="ui-layout-container">

<div class="ui-layout-center ui-layout-pane ui-layout-pane-center ui-layout-pane-hover ui-layout-pane-center-hover ui-layout-pane-open-hover ui-layout-pane-center-open-hover" style="position: absolute; margin: 0px; left: 216px; right: 216px; top: 57px; bottom: 57px; height: 643px; width: 986px; z-index: 0; display: block; visibility: visible;"> Iframe Center
	<p>These buttons control the layout in the parent page.</p>

	<h3>Close/Toggle West Pane</h3>

	<p><button onclick="parent.topLayout.toggle(&#39;west&#39;)">parent.topLayout.toggle('west')</button></p>

	<p><button onclick="parent.$(&#39;body&#39;).layout().toggle(&#39;west&#39;)">parent.$('body').layout().toggle('west')</button></p>

	<p><button onclick="parent.$(&#39;.ui-layout-west&#39;).trigger(&#39;layoutpaneclose&#39;)">parent.$('.ui-layout-west').trigger('layoutpaneclose')</button></p>

	<h3>Size East Pane</h3>

	<p><button onclick="var layout = parent.topLayout; layout.sizePane(&#39;east&#39;, layout.state.east.size + 20 )">var layout = parent.topLayout;
						<br>layout.sizePane('east',&nbsp;layout.state.east.size&nbsp;+&nbsp;20&nbsp;)</button></p>

	<p><button onclick="parent.$(&#39;body&#39;).layout().sizePane(&#39;east&#39;, 250)">parent.$('body').layout().sizePane('east', 250)</button></p>

	<p><button onclick="parent.$(&#39;.ui-layout-east&#39;).trigger(&#39;layoutpanesize&#39;, 300)">parent.$('.ui-layout-east').trigger('layoutpanesize',&nbsp;300)
						<br>(works as of Layout RC30.7)</button></p>

	<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
	<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
	<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
	<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
	<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
	<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
	<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
</div>

<div class="ui-layout-west ui-layout-pane ui-layout-pane-west" style="position: absolute; margin: 0px; left: 10px; right: auto; top: 57px; bottom: 57px; height: 643px; z-index: 0; width: 178px; display: block; visibility: visible;"> Iframe West
	<p><button onclick="$(this).closest(&#39;.ui-layout-pane&#39;).trigger(&#39;layoutpaneclose&#39;)">Close Me</button></p>
</div>

<div class="ui-layout-east ui-layout-pane ui-layout-pane-east" style="position: absolute; margin: 0px; left: auto; right: 10px; top: 57px; bottom: 57px; height: 643px; z-index: 0; width: 178px; display: block; visibility: visible;"> Iframe East
	<p><button onclick="$(this).closest(&#39;.ui-layout-pane&#39;).trigger(&#39;layoutpaneclose&#39;)">Close Me</button></p>
</div>

<div class="ui-layout-north ui-layout-pane ui-layout-pane-north" style="position: absolute; margin: 0px; top: 10px; bottom: auto; left: 10px; right: 10px; width: auto; z-index: 0; height: 19px; display: block; visibility: visible;"> Iframe North </div>

<div class="ui-layout-south ui-layout-pane ui-layout-pane-south" style="position: absolute; margin: 0px; top: auto; bottom: 10px; left: 10px; right: 10px; width: auto; z-index: 0; height: 19px; display: block; visibility: visible;"> Iframe South </div>


<div id="" class="ui-layout-resizer ui-layout-resizer-north ui-layout-resizer-open ui-layout-resizer-north-open" title="Resize" style="position: absolute; padding: 0px; margin: 0px; font-size: 1px; text-align: left; overflow: hidden; z-index: 2; cursor: n-resize; top: 51px; width: 1420px; height: 6px; left: 10px;" aria-disabled="false"><div id="" class="ui-layout-toggler ui-layout-toggler-north ui-layout-toggler-open ui-layout-toggler-north-open" title="Close" style="position: absolute; display: block; padding: 0px; margin: 0px; overflow: hidden; text-align: center; font-size: 1px; cursor: pointer; z-index: 1; visibility: visible; width: 48px; height: 6px; left: 685px; top: 0px;"></div></div><div id="" class="ui-layout-resizer ui-layout-resizer-south ui-layout-resizer-open ui-layout-resizer-south-open" title="Resize" style="position: absolute; padding: 0px; margin: 0px; font-size: 1px; text-align: left; overflow: hidden; z-index: 2; cursor: s-resize; bottom: 51px; width: 1420px; height: 6px; left: 10px;" aria-disabled="false"><div id="" class="ui-layout-toggler ui-layout-toggler-south ui-layout-toggler-open ui-layout-toggler-south-open" title="Close" style="position: absolute; display: block; padding: 0px; margin: 0px; overflow: hidden; text-align: center; font-size: 1px; cursor: pointer; z-index: 1; visibility: visible; width: 48px; height: 6px; left: 685px; top: 0px;"></div></div><div id="" class="ui-layout-resizer ui-layout-resizer-west ui-layout-resizer-open ui-layout-resizer-west-open" title="Resize" style="position: absolute; padding: 0px; margin: 0px; font-size: 1px; text-align: left; overflow: hidden; z-index: 2; cursor: w-resize; left: 210px; height: 665px; width: 6px; top: 57px;" aria-disabled="false"><div id="" class="ui-layout-toggler ui-layout-toggler-west ui-layout-toggler-open ui-layout-toggler-west-open" title="Close" style="position: absolute; display: block; padding: 0px; margin: 0px; overflow: hidden; text-align: center; font-size: 1px; cursor: pointer; z-index: 1; visibility: visible; height: 48px; width: 6px; top: 307px; left: 0px;"></div></div><div id="" class="ui-layout-resizer ui-layout-resizer-east ui-layout-resizer-open ui-layout-resizer-east-open" title="Resize" style="position: absolute; padding: 0px; margin: 0px; font-size: 1px; text-align: left; overflow: hidden; z-index: 2; cursor: e-resize; right: 210px; height: 665px; width: 6px; top: 57px;" aria-disabled="false"><div id="" class="ui-layout-toggler ui-layout-toggler-east ui-layout-toggler-open ui-layout-toggler-east-open" title="Close" style="position: absolute; display: block; padding: 0px; margin: 0px; overflow: hidden; text-align: center; font-size: 1px; cursor: pointer; z-index: 1; visibility: visible; height: 48px; width: 6px; top: 307px; left: 0px;"></div></div><div style="position: static; width: 0px; height: 0px; border: none; padding: 0px; margin: 0px;"><div id="trans-tooltip"></div></body></html>